<template>
  <div>
    <van-field
        v-model="bank.name"
        input-align="right"
        label="银行"
        placeholder="请输入"
        readonly 
        clickable
        :required="true"
        @click="show=true"
    />
    <van-popup v-model="show" position="bottom">
      <van-search
        v-model="keyword"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        @input="filterList"
      />
      <van-radio-group v-model="bank.id">
        <van-cell-group style="height:400px;overflow-y:auto;">
          <van-cell v-for="(item,index) in list" :key="index" :title="item.name" clickable @click="selectBank(item)">
            <template #right-icon>
              <van-radio :name="item.id" checked-color="#EF5C28" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
export default {
    props:{
      required:{
        type: Boolean,
        default: true
      }
    },
    data(){
        return{
            show: false,
            bankName: null,
            keyword: null,
            list: [],
            initList: [],
            bank:{
              id: null,
              name: null
            },            
        }
    },
    created(){
      this.getList();
    },
    methods:{
        init(value){
          this.keyword = null;
          this.bank.id = value;
          this.show = true;
        },
        getList(){
            this.$http('get', '/common/bankList', {}, (data,msg) =>{
                let arr = data.rows.map(item => {
                    return {id: item.id, name: item.bankName};
                });
                this.initList = arr;
                this.list = arr;
            });
        },
        filterList(val){
          if(val){
            let arr = this.initList.filter(item => {
              if(item.name.indexOf(val) != -1){
                return item;
              };
            });
            this.list = arr;
          }else{
            this.list = this.initList;
          }
        },
        selectBank(data) {
          this.bank = data;
            this.$emit('confirm', data);
            this.show = false;
        },
    }
}
</script>

<style>

</style>